<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			
		}
		.main{
			width: 100vw;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid black;
		}
		canvas{
			border: 1px solid black;
			width: 600px;
			height: 600px;
		}
	</style>
	<body>
		<div class="main">
			<canvas id="canvasone" width="500" height="500"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			
			let oPen=oneCanvas.getContext('2d');
			
			oPen.moveTo(170,100);
			oPen.lineTo(170,348);
			
			oPen.moveTo(135,311);
			oPen.lineTo(175,350);
			
			oPen.moveTo(205,311);
			oPen.lineTo(165,350);
			oPen.lineWidth=15;
			oPen.strokeStyle='cornflowerblue'
			oPen.stroke();
			
			oPen.moveTo(310,100);
			oPen.lineTo(310,350);
			
			oPen.moveTo(265,150);
			oPen.lineTo(315,98);
			
			oPen.moveTo(355,150);
			oPen.lineTo(305,98);
			
			oPen.stroke();
			
		}
	</script>
</html>
